<template>
  <div class="home-left">
    <div class="elec-info box">
      <div class="month-picker-box">
        <el-select
          v-model="countType"
          placeholder="请选择"
          style="width: 70%"
          popper-class="time-picker"
          @change="getElecStatisticsData"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <moduleLeft title="智慧用电安全">
        <div class="content">
          <div class="count-list">
            <div class="item">
              <span class="name">用电量(kmh)</span>
              <span class="num">{{ elecInfo.electricityConsumption }}</span>
            </div>
            <div class="line"></div>
            <div class="item" @click="handleViewUser" style="cursor: pointer">
              <span class="name">总用户数</span>
              <span class="num">{{ userCount }}</span>
            </div>
            <div class="line"></div>
            <div class="item">
              <span class="name">报警数</span>
              <span class="num">{{ elecInfo.warnTotal }}</span>
            </div>
          </div>
          <div class="chart-content" id="electinfo-chart"></div>
        </div>
      </moduleLeft>
    </div>
    <div class="selfbuildh-info box">
      <moduleLeft title="电力预警信息">
        <div class="content">
          <el-table
            :data="tableData"
            :height="total > queryParams.pageSize ? '45.5vh' : '48.5vh'"
            border
            class="table"
          >
            <el-table-column
              prop="address"
              label="地址"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              prop="userType"
              label="用户身份"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column
              label="类别"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
              <template slot-scope="scope">
                <span :style="scope.row.alarmTypeShowName == '温度' ? 'color: #043DE8': scope.row.alarmTypeShowName == '过压' ? 'color: #E8D904':''">{{ scope.row.alarmTypeShowName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <span class="operate-text" @click="onDeatil(scope.row)"
                  >详情</span
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > queryParams.pageSize"
            :total="total"
            :page.sync="queryParams.currentPage"
            :limit.sync="queryParams.pageSize"
            @pagination="getElecTableData"
            :layout="'prev, pager, next'"
          />
        </div>
      </moduleLeft>
    </div>
  </div>
</template>

<script>
import { mixins } from "./js/mixins";
import {
  powerStatisticsData,
  powerPageQuery,
  userStatisticsData,
} from "@/api/index";
export default {
  name: "homeLeft",
  mixins: [mixins],
  data() {
    return {
      options: this.$store.state.options,
      countType: 1,
      elecInfo: {},
      // 查询参数
      queryParams: {
        pageSize: 11,
        currentPage: 1,
      },
      tableData: [
        {
          address: "开州区汉丰街道龙锦名都四栋一单元401",
          alarmTypeShowName: "漏电",
          userType: "普通民用",
        },
      ],
      total: 0,
      userCount: 0,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getElecStatisticsData();
      this.getElecTableData();
      this.getUserStatisticsData();
    },
    initElecInfo(list) {
      // let xdata = ["9.27", "9.26", "9.25", "9.24", "9.23", "9.22", "9.21"];
      // let ydata = [
      //   {
      //     name: "昨日报警",
      //     data: [1, 2, 2, 1, 2, 1, 2],
      //     color: "#4064FF",
      //   },
      //   {
      //     name: "今日报警",
      //     data: [1, 1, 2, 2, 1, 2, 1],
      //     color: "#EBAF78",
      //   },
      // ];
      let xdata = [];
      let ydata = [
        {
          name: "昨日报警",
          data: [],
          color: "#4064FF",
        },
        {
          name: "今日报警",
          data: [],
          color: "#EBAF78",
        },
      ];
      list.forEach((item) => {
        xdata.push(item.monthOrDay);
        ydata[0].data.push(item.lastTotal - 0);
        ydata[1].data.push(item.currentTotal - 0);
      });
      this.setElecInfo({ xdata, ydata }, "electinfo-chart");
    },
    // 获取电力统计和图表数据
    getElecStatisticsData() {
      powerStatisticsData({ type: this.countType }).then((res) => {
        res.list = res.list ?? [];
        this.elecInfo = res;
        this.initElecInfo(res.list);
      });
    },
    getUserStatisticsData() {
      userStatisticsData({}).then((res) => {
        this.userCount = res.totals;
      });
    },
    // 查看电力预警详情
    onDeatil(row) {
      this.$emit("openElecPopup", row, "elec");
    },
    handleViewUser() {
      this.$emit("openUserPop");
    },
    // 获取电力预警表格信息
    getElecTableData() {
      powerPageQuery(this.queryParams).then((res) => {
        this.tableData = res.data ?? [];
        this.total = res.totals;
      });
    },
    // 分页pageSize变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getElecTableData();
    },
    // 分页pageNum变化
    handleCurrentChange(val) {
      this.queryParams.currentPage = val;
      this.getElecTableData();
    },
  },
};
</script>

<style scoped lang="scss">
.home-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .elec-info {
    width: 100%;
    height: 37%;
    position: relative;
    .content {
      height: calc(100% - 0px);
      .chart-content {
        margin-top: 1vh;
        height: calc(100% - 7vh);
      }
    }
  }
  .selfbuildh-info {
    width: 100%;
    height: 62%;
    position: relative;
    .content {
      height: calc(100% - 0px);
    }
  }
  .month-picker-box {
    position: absolute;
    top: 0;
    left: 64%;
    // right: -25%;
  }
  .count-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 3vh;
      .name {
        color: #fff;
        font-weight: 500;
        font-size: 0.14rem;
      }
      .num {
        color: #0ff;
        font-family: "YouSheBiaoTiHei";
        font-size: 0.26rem;
        font-style: normal;
        font-weight: 400;
      }
    }
    .line {
      width: 1px;
      height: 6vh;
      flex-shrink: 0;
      background: linear-gradient(
        0deg,
        rgba(0, 136, 255, 0) 0%,
        #08f 49.48%,
        rgba(0, 136, 255, 0) 98.96%
      );
    }
  }
}
</style>
